<template>
    <common-container v-loading="loading" element-loading-spinner="el-icon-loading" element-loading-text="拼命加载中…">
        <div slot="common-search">
            <div class="common-btn">
                <el-button type="primary" size="mini" @click="importExcelChild">导入权利金</el-button>
                <input type="file" name="file" class="el-upload__input" @change="changeFileUpload">
                <el-button type="primary" size="mini" @click="exportExcelChild">导出权利金</el-button>
            </div>

            <div class="search-common">
                <el-form :inline="true" :model="searchForm" ref="searchForm" size="mini">

                    <el-row :gutter="10">
                        <el-col :sm="8">
                            <el-form-item label="" prop="recode_name">
                                <el-input placeholder="请输入内容" v-model="searchForm.ncvalue" class="input-with-select">
                                    <el-select v-model="searchForm.nctype" slot="prepend" placeholder="请选择" style="width:150px;">
                                        <el-option label="全部" value=""></el-option>
                                        <el-option label="股票名称" value="name"></el-option>
                                        <el-option label="股票代码" value="code"></el-option>
                                    </el-select>
                                </el-input>
                            </el-form-item>
                        </el-col>

                        <el-col :sm="11">
                            <el-form-item label="" prop="recode_name">
                                <el-select v-model="searchForm.cycle" placeholder="请选择" style="width:200px;">
                                    <el-option label="全部" value=""></el-option>
                                    <el-option label="1周合约权利金(买方)" value="1w"></el-option>
                                    <el-option label="2周合约权利金(买方)" value="2w"></el-option>
                                    <el-option label="1个月合约权利金(买方)" value="1m"></el-option>
                                    <el-option label="2个月合约权利金(买方)" value="2m"></el-option>
                                    <el-option label="3个月合约权利金(买方)" value="3m"></el-option>

                                </el-select>
                                <el-input v-model="searchForm.littleVal" placeholder="请输入数值" controls-position="right" style="width:150px">
                                    <template slot="append">%</template>
                                </el-input>
                                -
                                <el-input v-model="searchForm.bigval " placeholder="请输入数值" controls-position="right" style="width:150px">
                                    <template slot="append">%</template>
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :sm="5">
                            <el-form-item>
                                <el-button type="primary" @click="searchFromChild">查询</el-button>
                                <el-button type="info" @click="resetForm('searchForm')">重置</el-button>
                            </el-form-item>
                        </el-col>
                    </el-row>

                </el-form>
            </div>

        </div>
        <div slot="common-body">
            <el-table :data="tableData" border style="width: 100%" size="mini">
                <el-table-column prop="shares_name" label="股票名称">
                </el-table-column>
                <el-table-column prop="shares_code" label="股票代码">
                </el-table-column>
                <el-table-column prop="trans_date" label="交易日">
                </el-table-column>
                <el-table-column prop="cycle_1w" label="1周合约权利金(买方)">
                </el-table-column>
                <el-table-column prop="cycle_1w_add" label="1周合约权利金(加价)">
                </el-table-column>
                <el-table-column prop="cycle_2w" label="2周合约权利金(买方)">
                </el-table-column>
                <el-table-column prop="cycle_2w_add" label="2周合约权利金(加价)">
                </el-table-column>
                <el-table-column prop="cycle_1m" label="1个月合约权利金(买方)">
                </el-table-column>
                <el-table-column prop="cycle_1m_add" label="1个月合约权利金(加价)">
                </el-table-column>
                <el-table-column prop="cycle_2m" label="2个月合约权利金(买方)">
                </el-table-column>
                <el-table-column prop="cycle_2m_add" label="2个月合约权利金(加价)">
                </el-table-column>
                <el-table-column prop="cycle_3m" label="3个月合约权利金(买方)">
                </el-table-column>
                <el-table-column prop="cycle_3m_add" label="3个月合约权利金(加价)">
                </el-table-column>

            </el-table>
        </div>
        <div slot="common-page">
            <page-pagination v-on:pageFun="pageFunNumber" :page="page" :pageSize="pageSize" :total="total"></page-pagination>
        </div>
    </common-container>
</template>

<script>
import service from "@/service";
import pagePagination from "@/components/Common/pagePagination";
// import commonDialog from "@/components/Common/CommonDialog";
import commonContainer from "@/components/Common/CommonContainer";
import { computedDay184, dateFormat } from '@/assets/utils.js'
export default {
    props: ['breadcrumb'],
    data() {
        return {
            page: 1,
            pageSize: 10,
            total: 0,
            loading: false,
            tableData: [],
            searchForm: {
                nctype: '',
                ncvalue: '',
                cycle: '',
                littleVal: '',
                bigval: ''
            }
        }
    },
    created() {
        this.$store.dispatch('setNavName', this.breadcrumb);
        this.queryTableList();
    },
    methods: {
        //查询列表
        async  queryTableList(page = 1) {
            this.loading = true;
            let params = Object.assign({}, this.searchForm, {
                page: page,
                pageSize: this.pageSize
            })
            console.log(params)
            let res = await service.haiheiQueryRoyaltyInfoServer(params);
            if (res.success) {
                this.tableData = res.result.pageList
                this.total = res.result.nums;
                this.page = res.result.page;
                this.pageSize = res.result.pageSize;
                this.loading = false;
            } else {
                this.$message({
                    type: "error",
                    message: res.msg
                });
                 this.loading = false;
            }
        },
        //分页
        pageFunNumber(page) {
            this.queryTableList(page);
        },
        //导入
        importExcelChild() {
            document.querySelector('.el-upload__input').click()
        },
        //上传
        changeFileUpload(e) {
            this.loading = true;
            let files = e.target.files;
            let formData = new FormData();
            formData.append('file', files[0]);
            service.haibeiServerUploadFile(formData,'uploadRoyaltyInfo').then(res => {
                if (res.success) {
                    this.loading = false;
                    e.target.value = ""
                    this.queryTableList();
                } else {
                    this.loading = false;
                }
            })
        },
        //导出
          exportExcelChild() {
              let name="RI_" + dateFormat(new Date()) + ".xlsx"
            let res= service.haiBeiServerDownloadExel(name)
        },
        //查询
        searchFromChild() {  this.queryTableList();},
        //重置
        resetForm(formName) {
            this.$refs[formName].resetFields();
        }
    },
    components: {
        pagePagination,
        commonContainer
    }
}
</script>

<style scoped>
</style>